<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/common.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../layui/layui.js"></script>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>

<!-- 头部导航 -->
<div class="header">
    <!-- header-top -->
    <div class="header-top">
        <div class="middle">
            <ul class="right">
                <a href="javascript:void(0)">帮助中心</a><span>|</span>
                <a href="javascript:void(0)">400-321-2202</a><span>|</span>
                <p href="javascript:void()">微信</p>
            </ul>
            <ul class="left">
                <a href="../customer/login.html" class="loginAfter">登陆</a><span>|</span>
                <a href="../customer/regist.html" class="registAfter">注册</a><span>|</span>
                <a href="" class="bye hide">退出</a>
                <p class="name" >我的随行</p>
            </ul>
        </div>
    </div>

    <!-- header-navigation -->
    <div class="header-navigation">
        <div class="middle">
            <!-- log -->
            <div class="header-img">
                <img src="../images/header-logo.PNG" alt="">
            </div>
            <div class="header-nav">
                <li><a href="../index.html" class="header-word">首页</a><span></span></li>
                <li><a href="../car_rental/car_filter.html"  class="header-word">去租车</a><span></span></li>
                <li><a  href="../car_rental/car_select.html"  class="header-word">车型查询</a><span></span></li>
                <li><a href="../network/businessoutlets.html"  class="header-word">网点导航</a><span></span></li>
                <li><a href="../customer/customer_center.html"  class="header-word">个人中心</a><span></span></li>
                <li><a href="../preferential/special_models.html" class="header-word">特价优惠</a><span></span></li>
                <li><a href="../customer/mycollect.html" class="header-word">我的收藏</a><span></span></li>

            </div>
        </div>
    </div>
</div>

<div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">
    <button data-method="offset" data-type="t" class="layui-btn layui-btn-normal">上弹出</button>
</div>

<script>
    // 模块
    layui.use('layer', function(){ //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
        //触发事件
        var active = {
            offset: function(othis){
                var type = othis.data('type')
                    ,text = othis.text();

                layer.open({
                    type: 1
                    ,moveOut:false
                    ,moveType: 0//拖拽模式，0或者1
                    ,offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                    ,id: 'layerDemo'+type //防止重复弹出
                    ,content:
                        '<div style="padding: 20px 100px;"><div class="layui-inline">\n' +
                        '      <label class="layui-form-label">日期范围</label>\n' +
                        '      <div class="layui-inline" id="test6">\n' +
                        '        <div class="layui-input-inline">\n' +
                        '          <input type="text" autocomplete="off" id="test-startDate-1" class="layui-input" placeholder="开始日期">\n' +
                        '        </div>\n' +
                        '        <div class="layui-form-mid">-</div>\n' +
                        '        <div class="layui-input-inline">\n' +
                        '          <input type="text" autocomplete="off" id="test-endDate-1" class="layui-input" placeholder="结束日期">\n' +
                        '        </div>\n' +
                        '      </div>\n' +
                        '    </div></div>'
                    ,btn: '确定'
                    ,btnAlign: 'c' //按钮居中
                    ,shade: 0 //不显示遮罩
                    ,yes: function(){
                        layer.closeAll();
                    }
                });
            }
        };

        //一定要写这句话不然不弹窗，给弹窗按钮增加点击事件
        $('#layerDemo .layui-btn').on('click', function(){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });

    });


        layui.use('laydate', function(){
        var laydate = layui.laydate;
            //日期时间范围
            laydate.render({
                elem: '#test10'
                ,type: 'datetime'
                ,range: true
            });
    })


</script>

</body>
</html>